import React, { memo, useState, useEffect } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";

import { getDjRadiosAction } from "../../store/actionCreators";

import HYThemeHeaderNormal from "@/components/theme-header-normal";
import HYRadioRankingCover from "@/components/radio-ranking-cover";
import HYPagination from "@/components/pagination";
import { RankingWrapper } from "./style";

export default memo(function HYRadioRanking() {
  const [currentPage, setCurrentPage] = useState(1);

  const { currentId, radios } = useSelector(
    (state) => ({
      currentId: state.getIn(["djRadio", "currentId"]),
      radios: state.getIn(["djRadio", "radios"]),
    }),
    shallowEqual
  );
  const dispatch = useDispatch();

  useEffect(() => {
    if (currentId === 0) return;
    dispatch(getDjRadiosAction(currentId, 0));
  }, [dispatch, currentId]);

  const onPageChange = (page) => {
    setCurrentPage(page);
    dispatch(getDjRadiosAction(currentId, page * 30));
  };

  return (
    <RankingWrapper>
      <HYThemeHeaderNormal title="电台排行榜" />
      <div className="ranking-list">
        {radios.map((item, index) => {
          return <HYRadioRankingCover key={item.id} radio={item} />;
        })}
      </div>
      <HYPagination
        currentPage={currentPage}
        total={1000}
        pageSize={30}
        onPageChange={onPageChange}
      />
    </RankingWrapper>
  );
});
